<template>
    <view class="nav-scrollx">
        <view class="nav-cont" v-if="divide">
            <view class="item" :style="[tabItemStyle(index)]"  v-for="(item, index) in list" @tap="clickTab(index)">{{item.name}}</view>
        </view>
        <scroll-view scroll-x class="scrollx" v-else>
            <view class="item" :style="[tabItemStyle(index)]"  v-for="(item, index) in list" @tap="clickTab(index)">{{item.name}}</view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    props: {
        list: {
            type: Array,
            default(){
                return []
            }
        },
        
        // 是否平分
        divide: {
        	type: Boolean,
        	default: false,
        },
        // 当前活动tab的索引
        current: {
        	type: [Number, String],
        	default: 0
        },
        // 选中项的主题颜色
        activeColor: {
        	type: String,
        	default: '#21a0ff'
        },
        // 未选中项的颜色
        inactiveColor: {
        	type: String,
        	default: '#fff'
        },
        height: {
        	type: [Number, String],
        	default: 74,
        },
        // 当前活动tab item的样式
        activeItemStyle: {
        	type: Object,
        	default() {
        		return {}
        	}
        },
    },
    methods: {
        // 点击某一个tab菜单
        clickTab(index) {
        	// 点击当前活动tab，不触发事件
        	if(index == this.current) return ;
        	// 发送事件给父组件
        	this.$emit('change', index);
        },
    },
    computed:{
        // tab的样式
        tabItemStyle() {
        	return (index) => {
        		let style = {
        			height: this.height + 'rpx',
        			'lineHeight': this.height + 'rpx',
                    'backgroundColor': this.inactiveColor,
        		};
        		// 字体加粗
        		if (index == this.current) {
                    style.backgroundColor = this.activeColor;
                    style.color = '#fff'
                    style['boxShadow'] = '0px 4rpx 20rpx 0px rgba(33, 160, 255, 0.35)';
                     style['webkitBoxShadow'] = '0px 4rpx 20rpx 0px rgba(33, 160, 255, 0.35)';
        			// 给选中的tab item添加外部自定义的样式
        			style = Object.assign(style, this.activeItemStyle);
        		} else {
        			// style.color = this.inactiveColor;
        		}
        		return style;
        	}
        }
    }
};
</script>

<style scoped lang="scss">
page{
    background: $uni-bg-color-grey;
}
.nav-scrollx {
    .nav-cont{
        display: flex;
        justify-content: center;
        .item{
            margin: 20rpx;
        }
    }
    .item {
        display: inline-block;
        height: 76rpx;
        line-height: 76rpx;
        border-radius: 50px;
        background-color: #f7f8f8;
        color: #333;
        min-width: 160rpx;
        padding: 0 20rpx;
        text-align: center;
        // transition: background-color 0.3s;
        margin: 20rpx 0 20rpx 30rpx;
    }
}
</style>
